import EditChart from '@/pages/MyChart/EditChart';
import { deleteChartUsingPOST, listMyChartByPageUsingPOST } from '@/services/yubi/chartController';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Avatar, Card, List, message, Popconfirm, Result } from 'antd';
import Search from 'antd/es/input/Search';
import ReactECharts from 'echarts-for-react';
import React, { useEffect, useState } from 'react';

/**
 * 我的图表页面
 *
 * */
const MyChart: React.FC = () => {
  const initSearchParams = {
    // 初始情况下返回第一页
    current: 1,
    // 初始情况下返回每页4条数据
    pageSize: 4,
  };

  /*
   * 定义了一个状态（searchParams）和它对应的更新函数（setSearchParams），并初始化为 initSearchParams
   * searchParams 是我们要发送给后端的查询条件，它的参数类型是 API.ChartQueryRequest;
   * {...}是展开语法，它将 initSearchParams 中的所有属性展开并复制到一个新对象中，而不改变原始对象，
   * 因此可以避免在现有对象上直接更改值的对象变异操作
   * 因为在 React 中，不推荐直接俄修改状态或属性，而是创建一个新对象并将其分配给状态或属性，这个方法就非常有用。
   * */

  const [searchParams, setSearchParams] = useState<API.ChartQueryRequest>({ ...initSearchParams });
  const [chartList, setChartList] = useState<API.Chart[]>();
  const [total, setTotal] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(true);

  const [openEditChartPage, setOpenEditChartPage] = useState(false);

  /*
   * 组件中获取 initialState
   * */
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};

  const cancel = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    message.error('Click on No');
  };

  // 定义一个获取数据的异步函数
  const loadData = async () => {
    setLoading(true);
    /*
     * 调用后端的接口，并传入 searchParams 作为请求参数，返回一个相应res;
     * listMyChartByPageUsingPOST 方法是通过 openapi 根据 Swagger 接口文档自动生成的;
     * 当 searchParams 状态改变时，可以通过 setSearchParams 更新状态并重新生成数据
     * */
    try {
      // setSearchParams({...searchParams, current: 1})
      const res = await listMyChartByPageUsingPOST(searchParams);
      console.log('数据返回值：', res);
      if (res.data) {
        const { records, total } = res.data;
        setChartList(records ?? []);
        setTotal(total ?? 0);
      } else {
        message.error('获取图表失败');
      }
    } catch (e: any) {
      // 如果出现异常，提示”获取我的图标失败“+错误原因
      message.error('获取我的图表失败:' + e.message);
    }
    setLoading(false);
  };

  const deleteChartConfirm = async (id: any) => {
    const res = await deleteChartUsingPOST({ id });
    console.log(res);
    const { code, data } = res;
    if (data) {
      message.info('删除成功！');
      setSearchParams({ ...searchParams });
    } else {
      message.error('删除失败！');
    }
  };

  const editChart = () => {
    // message.warning('功能开发中');
    setOpenEditChartPage(true);
  };

  const onCreate = (values: any) => {
    console.log('提交表单： ', values);
    setOpenEditChartPage(false);
  };

  // 首次加载页面时、或绑定的数据更新时，触发加载数据
  useEffect(() => {
    loadData();
  }, [searchParams]);
  return (
    <div className="my-chart-page">
      <div>
        <Search
          placeholder="请输入图表名称"
          allowClear
          enterButton
          loading={loading}
          onSearch={(value) => {
            setSearchParams({
              ...searchParams,
              name: value,
              current: 1,
              pageSize: searchParams.pageSize,
            });
          }}
        />
      </div>
      <br />

      {/* 换行 */}
      <List
        grid={{
          gutter: 16,
          xs: 1,
          sm: 1,
          md: 1,
          lg: 2,
          xl: 2,
          xxl: 2,
          column: 2,
        }}
        loading={loading}
        pagination={{
          onChange: (page, pageSize) => {
            setSearchParams({
              ...searchParams,
              current: page,
              pageSize,
            });
          },
          pageSize: searchParams.pageSize,
          current: searchParams.current,
          total: total,
        }}
        dataSource={chartList}
        // loading={loading}
        renderItem={(item) => (
          <List.Item key={item.id}>
            {/* 你要展示的列表信息 */}
            <Card
              style={{ width: '100%', height: '80%' }}
              actions={[
                <EditOutlined key="edit" onClick={() => editChart()} />,
                <Popconfirm
                  key={item.id}
                  title="删除图表"
                  description="确定要删除图表吗?"
                  onConfirm={() => deleteChartConfirm(item.id)}
                  okText="Yes"
                  cancelText="No"
                >
                  <DeleteOutlined key="delete" />,
                </Popconfirm>,
              ]}
            >
              <List.Item.Meta
                avatar={
                  <Avatar
                    src={'https://pic4.zhimg.com/v2-c6b83472c33f9690c3cdd8376a2f3993_r.jpg'}
                  />
                }
                title={item.name}
                description={item.chartType ? '图标类型：' + item.chartType : undefined}
              />
              <>
                {item.status === 'wait' && (
                  <>
                    <Result
                      status="warning"
                      title="待生成"
                      subTitle={item.execMessage ?? '当前图表生成队列繁忙，请耐心等待'}
                    />
                  </>
                )}
                {item.status === 'running' && (
                  <>
                    <Result status="info" title="图表生成中" subTitle={item.execMessage} />
                  </>
                )}
                {item.status === 'success' && (
                  <>
                    <div style={{ marginBottom: 16 }} />
                    {'分析目标：' + item.goal}
                    <div style={{ marginBottom: 16 }} />
                    {'分析结论：' + (item.genResult ? item.genResult : '无')}
                    <ReactECharts option={item.genChart && JSON.parse(item.genChart)} />
                  </>
                )}
                {item.status === 'failed' && (
                  <>
                    <Result status="error" title="图表生成失败" subTitle={item.execMessage} />
                  </>
                )}
              </>
            </Card>
            {/*TODO 生成成功才显示删除和修改选项*/}
            {item.status === 'success' && (
              <>
                <EditChart
                  open={openEditChartPage}
                  onCreate={onCreate}
                  onCancel={() => {
                    setOpenEditChartPage(false);
                  }}
                />
              </>
            )}
          </List.Item>
        )}
      />
    </div>
  );
};
export default MyChart;
